<script setup>
import { reactive, onMounted } from "vue";
import { getShouC, getUpdataChusheng } from "@/http/api.js";
import { useRouter } from "vue-router";
const router = useRouter();
const data = reactive({
  sex: ["男", "女"],
  obj: {},
});
onMounted(() => {
  xinxi();
});
// 信息数据
const xinxi = async () => {
  const id = localStorage.getItem("id");
  const res = await getShouC(id);
  console.log(res);
  data.obj = {
    id: localStorage.getItem("id"),
    sex: res.sex,
  };
};
// 更新数据
const inof = async () => {
  const res = await getUpdataChusheng(data.obj);
  console.log(res);
};
const baocu = () => {
  inof();
  router.back();
};
const sex = (i) => {
  data.index1 = i;
  data.obj.sex = i;
};
</script>
<template>
  <div class="sex">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>修改个人信息</h3>
      <p @click="baocu">保存</p>
    </header>
    <div
      class="xb"
      v-for="(item, index) in data.sex"
      :key="index"
      :class="data.index1 == index ? 'active' : ''"
      @click="sex(index)"
    >
      {{ item }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.sex {
  height: 100vh;
  background-color: #f8f8f8;
  header {
    display: flex;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background: #fff;
  }
  .xb {
    padding: 0 30px;
    margin: 30px 0;
    font-size: 32px;
  }
  .active {
    background: red;
  }
}
</style>
